<template>
	<view class="details">
		 <u-navbar :fixed="false">
			<view slot="left">
				<view class="left-arrow">
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
			<view slot="right">
				<view class="right-content">
					<image src="../../static/logo.png" mode="" class="titel-start"></image>
					<image src="../../static/logo.png" mode="" class="titel-start"></image>
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="content-title">
				<view class="title-image" style="background-image:url('../../static/logo.png');">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="title-content">
					<view class="title-content-main">
						<view class="right-title">
							WEB前端算法
						</view>
						<view class="right-tips">
							算犯法是卖你是大肠的敲门钻，并且是是体会呢技术的毕竟那个甚至一路，课程呢内容半年：算法，面试题
						</view>
					</view>
					<view class="right-member">
						会员专享 ￥199.00
					</view>
				</view>
			</view>
			<view class="content-foot">
				<view class="item" 
				v-for="(item,index) in courseNav" 
				:key="item.id"
				@click="tabCourse(item)"
				:class="item.id==current?'active':''"
				>
					{{item.name}}
				</view>
			</view>
			<swiper >
				<swiper-item>
					<scroll-view scroll-y="true" >
						<catalogue></catalogue>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" >
						<catalogue></catalogue>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="details-footer">
			<view class="footer-cart">
				加入购物车
			</view>
			<view class="footer-buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import catalogue from '@/components/detail/catalogue.vue'
	export default {
		components:{
			catalogue
		},
		data() {
			return {
				courseNav:[
					{id:0,name:'目录'},
					{id:1,name:'下载笔记代码'}
				],
				current:0
			}
		},
		methods: {
			tabCourse(item){
				this.current = item.id
			}
		}
	}
</script>

<style scoped lang="scss">
.details{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.left-arrow{
/* 	width: 22rpx;
	height: 22rpx; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10rpx;
}
.left-arrow image{
	width: 18rpx;
	height: 33rpx;
}
.right-content{
	display: flex;
	justify-content: center;
	align-items: center;
}
.right-content image{
	width: 35rpx;
	height: 35rpx;
	padding-right: 10rpx;
}
/* /deep/ .u-navbar__content{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: red!important;
} */
.titel-start{
	margin-right: 20rpx;
}
/deep/ .u-navbar__content{
	border-bottom: 1px solid #f5f5f5;
}
.content{
	display: flex;
	flex-direction: column;
}
.content-title{
	display: flex;
	justify-content: space-between;
	margin: 30rpx;
	padding: 0 30rpx;
}
.title-image{
	position: relative;
	width: 300rpx;
	height: 186rpx;
	border-radius: 5rpx;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.title-image image{
	position: absolute;
	right: 0;
	top: 0;
	width: 52rpx;
	height: 22rpx;
}
.title-content{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	padding-left: 16rpx;
	.right-title{
		font-size: 32rpx;
		font-weight: 400;
		color: #191919;
	}
	.right-tips{
		font-size: 24rpx;
		font-weight: 400;
		color: #c5c5c5;
		height: 30px;
		margin-top: 8rpx;
		overflow: hidden;
	}
	.right-member{
		font-size: 24rpx;
		font-weight: 700;
		color: #ff0018;
	}
}
.content-foot{
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 60rpx;
	margin-top: 14rpx;
	.item{
		font-size: 28rpx;
		color: #303133;
		position: relative;
		&.active::after{
			content: '';
			position: absolute;
			left: 0;
			bottom: -20rpx;
			background-color: #0445ff;
			width: 100%;
			height: 4rpx;
			border-radius: 2rpx;
		}
	}
}
.details-footer{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 170rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	border-top: 1px solid #c5c5c5;
	text-align: center;
	font-size: 28rpx;
	color: #fff;
	
	.footer-cart{
		width: 260rpx;
		height: 81rpx;
		line-height: 81rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg,#feb729 0,#ff9528);
	}
	
	.footer-buy{
		width: 260rpx;
		height: 81rpx;
		line-height: 81rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg,#fe5b5c 0,#ec0d0e);
	}
}
</style>
